<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>排版样式</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
</head>
<body  class="table-responsive" >

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">斑马线效果table-striped</p>

<table class="table table-striped">
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>50</td>
		</tr>
		<tr >
			<td>2</td>
			<td>李四</td>
			<td>女</td>
			<td>48</td>
		</tr>
		<tr >
			<td>3</td>
			<td>王五</td>
			<td>男</td>
			<td>52</td>
		</tr>
		<tr>
			<td>4</td>
			<td>马六</td>
			<td>男</td>
			<td>55</td>
		</tr>
	</tbody>
</table>





<!--下面 代码-->
<pre>
	&lt;table class="table table-striped">
	&lt;thead>
		&lt;tr>
			&lt;th>编号&lt;/th>
			&lt;th>姓名&lt;/th>
			&lt;th>性别&lt;/th>
			&lt;th>年龄&lt;/th>
		&lt;/tr>
	&lt;/thead>
	&lt;tbody>
		&lt;tr>
			&lt;td>1&lt;/td>
			&lt;td>张三&lt;/td>
			&lt;td>男&lt;/td>
			&lt;td>50&lt;/td>
		&lt;/tr>
	&lt;/tbody>
&lt;/table>
</pre>

<!--上面 代码-->

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">响应式布局 表格父元素设置响应式，小于 768px 出现边框  body class="table-responsive"</p>

<table class="table table-striped">
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>50</td>
		</tr>
		<tr >
			<td>2</td>
			<td>李四</td>
			<td>女</td>
			<td>48</td>
		</tr>
		<tr >
			<td>3</td>
			<td>王五</td>
			<td>男</td>
			<td>52</td>
		</tr>
		<tr>
			<td>4</td>
			<td>马六</td>
			<td>男</td>
			<td>55</td>
		</tr>
	</tbody>
</table>


<!--下面 代码-->
<pre>






</pre>

<!--上面 代码-->





<br/>table-hover 鼠标悬停时显示背景效果<br/>
<table class="table table-hover">
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>50</td>
		</tr>
		<tr >
			<td>2</td>
			<td>李四</td>
			<td>女</td>
			<td>48</td>
		</tr>
		<tr >
			<td>3</td>
			<td>王五</td>
			<td>男</td>
			<td>52</td>
		</tr>
		<tr>
			<td>4</td>
			<td>马六</td>
			<td>男</td>
			<td>55</td>
		</tr>
	</tbody>
</table>
外边距据这里空出了20px。
<br/>使用table-striped 显示斑马线效果 table-bordered加边框<br/>
<table class="table table-striped table-bordered">
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>50</td>
		</tr>
		<tr >
			<td>2</td>
			<td>李四</td>
			<td>女</td>
			<td>48</td>
		</tr>
		<tr >
			<td>3</td>
			<td>王五</td>
			<td>男</td>
			<td>52</td>
		</tr>
		<tr>
			<td>4</td>
			<td>马六</td>
			<td>男</td>
			<td>55</td>
		</tr>
	</tbody>
</table>

<br/>通过class="success"  class="info" 改变行内颜色<br/>
<table class="table table-hover">
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr class="warning">
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>50</td>
		</tr>
		<tr class="info">
			<td>2</td>
			<td>李四</td>
			<td>女</td>
			<td>48</td>
		</tr>
		<tr class="success">
			<td>3</td>
			<td>王五</td>
			<td>男</td>
			<td>52</td>
		</tr>
		<tr class="danger">
			<td>4</td>
			<td>马六</td>
			<td>男</td>
			<td>55</td>
		</tr>
	</tbody>
</table>
<a href="###" >Link</a>
<a href="###" class="btn btn-default">Link</a>
<input type="button" class="btn btn-default" value="Input">
<button class="btn btn-default">Button default</button>
<button class="btn btn-success">Button success</button>
<button class="btn btn-info">Button info</button>
<button class="btn btn-warning">Button warning </button>
<button class="btn btn-danger">Button danger</button>
<button class="btn btn-primary">Button primary </button>
<button class="btn btn-link">Button5</button><br/>

<button class="btn btn-info btn-lg">Button4</button>
<button class="btn btn-info btn-sm">Button3</button>
<button class="btn btn-info btn-xs">Button2</button>
<button class="btn btn-info btn-block active">块级Button</button>
<button class="btn btn-info btn-block disabled">禁用</button>

<button class="btn btn-primary">Button1</button>
<a href="https://www.baidu.com/"><button  class="btn btn-info">Butto20</button></a>


<!--下面 代码-->
<pre>
&lt;a href="###" >Link&lt;/a>
&lt;a href="###" class="btn btn-default">Link&lt;/a>
&lt;input type="button" class="btn btn-default" value="Input">
&lt;button class="btn btn-default">Button default&lt;/button>
&lt;button class="btn btn-success">Button success&lt;/button>
&lt;button class="btn btn-info">Button info&lt;/button>
&lt;button class="btn btn-warning">Button warning &lt;/button>
&lt;button class="btn btn-danger">Button danger&lt;/button>
&lt;button class="btn btn-primary">Button primary &lt;/button>
&lt;button class="btn btn-link">Button5&lt;/button>&lt;br/>

&lt;button class="btn btn-info btn-lg">Button4&lt;/button>
&lt;button class="btn btn-info btn-sm">Button3&lt;/button>
&lt;button class="btn btn-info btn-xs">Button2&lt;/button>
&lt;button class="btn btn-info btn-block active">块级Button&lt;/button>
&lt;button class="btn btn-info btn-block disabled">禁用&lt;/button>

&lt;button class="btn btn-primary">Button1&lt;/button>
&lt;a href="https://www.baidu.com/">&lt;button  class="btn btn-info">Butto20&lt;/button>&lt;/a>



</pre>
<!--上面 代码-->

<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>

</body>
</html>